<template>
	<view id="analysis">
		<view class="info-time">
			<text class="datetime" v-if="queryParam.cycleEnum === ''" @click="showDate = true">全部</text>
			<text class="datetime" v-if="queryParam.cycleEnum === 'TODAY'" @click="showDate = true">天</text>
			<text class="datetime" v-if="queryParam.cycleEnum === 'WEEK'" @click="showDate = true">周</text>
			<text class="datetime" v-if="queryParam.cycleEnum === 'MONTH'" @click="showDate = true">月</text>
			<u-icon name="arrow-down"></u-icon>
		</view>
		<u-gap height="5" bgColor="#eee"></u-gap>
		<view class="analysis-content">
			<uni-collapse accordion v-model="currentTab" @change="open">
				<uni-collapse-item v-if="item.projectCnt != 0" v-for="(item,index) in areaList" :name="item.id" :key="index">
					<template v-slot:title>
						<view class="v-analysis-title">
							<view class="title-content">
								<image v-if="index === 0" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/layer2.png"></image>
								<image v-else src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/layer5.png"></image>
								{{item.areaName}}
							</view>
							<view class="title-num">
								项目数量:{{item.projectCnt}}
							</view>
						</view>
					</template>
					<view class="analysis-item">
						<view class="analysis-title" @click="toSelector(1, '', patrolCount.rcxj.count, item.areaName)">日常检查项目:{{patrolCount.rcxj.count}}</view>
						<view class="analysis-state">
							<view class="analysis-state-item1" @click="toSelector(1, 'finish', patrolCount.rcxj.is1, item.areaName)">已巡检数量:{{patrolCount.rcxj.is1}}</view>
							<!-- <view class="analysis-state-item2" @click="toSelector(1, 'unfinish', patrolCount.rcxj.is0, item.areaName)">未巡检数量:{{patrolCount.rcxj.is0}}</view> -->
						</view>
					</view>
					<view class="analysis-item">
						<view class="analysis-title" @click="toSelector(2, '', patrolCount.dcjb.count, item.areaName)">督察交办单:{{patrolCount.dcjb.count}}</view>
						<view class="analysis-state">
							<view class="analysis-state-item1" @click="toSelector(2, 'finish', patrolCount.dcjb.is1, item.areaName)">已完结数量:{{patrolCount.dcjb.is1}}</view>
							<view class="analysis-state-item2" @click="toSelector(2, 'unfinish', patrolCount.dcjb.is0, item.areaName)">未完结数量:{{patrolCount.dcjb.is0}}</view>
						</view>
					</view>
					<view class="analysis-item">
						<view class="analysis-title" @click="toSelector(3, '', patrolCount.wtzg.count, item.areaName)">问题整改单:{{patrolCount.wtzg.count}}</view>
						<view class="analysis-state">
							<view class="analysis-state-item1" @click="toSelector(3, 'finish', patrolCount.wtzg.is1, item.areaName)">已整改数量:{{patrolCount.wtzg.is1}}</view>
							<view class="analysis-state-item2" @click="toSelector(3, 'unfinish', patrolCount.wtzg.is0, item.areaName)">未整改数量:{{patrolCount.wtzg.is0}}</view>
						</view>
					</view>
					<view class="analysis-item">
						<view class="analysis-title"@click="toSelector(4, '', patrolCount.cqzg.count, item.areaName)">超期整改项目:{{patrolCount.cqzg.count}}</view>
						<view class="analysis-state">
							<view class="analysis-state-item1" @click="toSelector(4, 'finish', patrolCount.cqzg.is1, item.areaName)">超期已整改:{{patrolCount.cqzg.is1}}</view>
							<view class="analysis-state-item2" @click="toSelector(4, 'unfinish', patrolCount.cqzg.is0, item.areaName)">超期未整改:{{patrolCount.cqzg.is0}}</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>	
		<u-calendar :show="show" mode="range" @confirm="confirm" @close="close"></u-calendar>
		<!-- 时间选择 -->
		<u-picker
			:show="showDate"
			:columns="columnsDate"
			closeOnClickOverlay
			@confirm="onProConfirm"
			@cancel="onProCancel"
			@close="onClosePro"
		>
		</u-picker>
	</view>
</template>

<script>
	import { getAreaList } from '@/api/global'
	import { getPatrolMapCount } from '@/api/analysis'
	
	export default {
		data() {
			return {
				showDate: false,
				show: false,
				queryParam: {
					areaId: '',
					cycleEnum: ''
				},
				areaList: [],
				patrolCount: {},
				currentTab: '',
				columnsDate: [
					['全部', '天', '周', '月']
				],
				filterTime: '全部'
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList () {
				getAreaList().then(res => {
					this.areaList = res.data.data
				})
			},
			confirm(e) {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				if (this.queryParam.areaId) {
					getPatrolMapCount(this.queryParam).then(res => {
						this.patrolCount = res.data.data[0]
						uni.hideLoading()
					})
				}
				uni.hideLoading()
				this.close()
			},
			close() {
				this.show = false
			},
			/**
			 * @param {Object} type
			 * 1:日常检查 2:督察交办 3:问题整改 4:超期整改
			 * @param {Object} status
			 * all:全部 finish:完成 unfinish:未完成
			 * @param {Object} num
			 * 具体数量
			 */
			toSelector (type, status, num, areaName) {
				uni.navigateTo({
					url: '/packageD/analysis/analysis-selector?type=' + 
					type + '&status=' + status + '&sum=' + 
					num + '&areaId=' + this.queryParam.areaId + '&cycleEnum=' + 
					this.queryParam.cycleEnum + '&areaName=' + areaName
				})
			},
			open (e) {
				if (e) {
					uni.showLoading({
						title: '数据加载中',
						mask: true
					})
					this.queryParam.areaId = e
					getPatrolMapCount(this.queryParam).then(res => {
						this.patrolCount = res.data.data[0]
						uni.hideLoading()
					})
				}
			},
			onProConfirm(e) {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				this.filterTime = e.value[0]
				const index = e.indexs[0]
				this.showDate = false
				if (index === 0) {
					this.queryParam.cycleEnum = ''
				} else if (index === 1) {
					this.queryParam.cycleEnum = 'TODAY'
				} else if (index === 2) {
					this.queryParam.cycleEnum = 'WEEK'
				} else {
					this.queryParam.cycleEnum = 'MONTH'
				}
				if (this.queryParam.areaId) {
					getPatrolMapCount(this.queryParam).then(res => {
						this.patrolCount = res.data.data[0]
						uni.hideLoading()
					})
				}
				uni.hideLoading()
			},
			onProCancel() {
				this.showIconDate = true
				this.showDate = false
			},
			onClosePro() {
				this.showIconDate = true
				this.showDate = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	#analysis {
		.info-time {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20upx 0;
			.datetime {
				margin: 0 10upx;
			}
		}
		.analysis-content {
			.v-analysis-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20upx 0 20upx 20upx;
				.title-content {
					display: flex;
					justify-content: start;
					align-items: center;
					image {
						width: 40upx;
						height: 40upx;
						margin-right: 10upx;
					}
				}
				.title-num {
					width: 200upx;
					color: $uni-color-primary;
					font-weight: bold;
				}
			}
			.analysis-item {
				display: flex;
				flex-direction: column;
				padding: 30upx;
				border-bottom: #eee 1px solid;
				.analysis-title {
					margin-bottom: 50upx;
					font-weight: bold;
					color: $uni-text-color;
				}
				.analysis-state {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.analysis-state-item1 {
						font-weight: bold;
						color: $uni-color-success
					}
					.analysis-state-item2 {
						font-weight: bold;
						color: $uni-color-error
					}
				}
			}
			.analysis-item:last-child {
				border-bottom: none
			}
		}
	}
</style>
